<template>
  <div class="detail-section">
    <div class="header">
      <div class="title">{{ titleText }}</div>
    </div>
    <div class="line"></div>
    <div class="content">
      <slot>默认内容 </slot>
    </div>
    <div class="footer" v-if="footerText != ' '">
      <span class="move">{{ footerText }} </span>
      <van-icon name="arrow" />
    </div>
  </div>
</template>

<script setup>
defineProps({
  titleText: {
    type: String,
    default: "默认标题",
  },
  footerText: {
    type: String,
    default: "默认文本",
  },
});
</script>

<style lang="less" scoped>
.detail-section {
  background-color: #fff;
  .title {
    padding: 10px 12px;
    font-size: 20px;
    color: #333;
    line-height: 22px;
    font-weight: 600;
  }
  .line {
    width: 100%;
    height: 1px;
    background-color: #eee;
  }
  .content {
    padding: 15px 16px 0 16px;
    slot {
      background-color: #f7f9fb;
    }
  }
  .footer {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    font-size: 14px;
    color: var(--color);
    font-weight: 600;
  }
}
</style>
